import 'package:flutter/material.dart';
import 'package:card_swiper/card_swiper.dart';

class FullScreenImage extends StatefulWidget {
  final VoidCallback hideOverlay;
  final List listImageUrl; // 图片数组

  const FullScreenImage(
      {super.key, required this.hideOverlay, required this.listImageUrl});

  @override
  State<FullScreenImage> createState() => _FullScreenImageState();
}

class _FullScreenImageState extends State<FullScreenImage> {
  int selectedIndex = 0; // 默认选中第一个

  // 处理右滑事件
  void _handleRightSwipe() {
    if (selectedIndex > 0) {
      setState(() {
        selectedIndex -= 1;
      });
    }
  }

  // 处理左滑事件
  void _handleLeftSwipe(List list) {
    if (selectedIndex < list.length - 1) {
      setState(() {
        selectedIndex += 1;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    List list = widget.listImageUrl;
    return Stack(
      children: [
        // 手势占满整个屏幕放在最底层
        GestureDetector(
          onTap: widget.hideOverlay,
          child: Container(
            color: Colors.black.withOpacity(0.8),
          ),
        ),
        // 大图
        Center(
          child: Swiper(
            itemBuilder: (context, index) {
              return GestureDetector(
                onLongPress: () {
                  print("长按了第${selectedIndex+1}张图片");
                },
                child: Image.network(
                  list[selectedIndex],
                  fit: BoxFit.fitWidth,
                ),
              );
            },
            // indicatorLayout: PageIndicatorLayout.COLOR,
            itemCount: list.length,
            onIndexChanged: (int index) {
              setState(() {
                selectedIndex = index; // 更新选定的索引值
              });
            },
          ),
        ),
        // 缩略图栏
        Positioned(
          bottom: 10,
          left: 20,
          right: 20,
          height: 130,
          child: Column(
            children: [
              SizedBox(
                height: 110,
                child: Align(
                  alignment: Alignment.center,
                  child: SizedBox(
                    width: list.length == 1
                        ? 90
                        : list.length == 2
                            ? 180
                            : 270,
                    //宽度需要通过动态实现
                    child: ListView.builder(
                      scrollDirection: Axis.horizontal, // 水平滑动
                      itemCount: list.length,
                      itemBuilder: (BuildContext context, int index) {
                        return GestureDetector(
                          onTap: () {
                            setState(() {
                              selectedIndex = index; // 更新选中索引
                            });
                          },
                          child: Container(
                            margin: const EdgeInsets.only(left: 5, right: 5),
                            width: 80,
                            decoration: BoxDecoration(
                              border: Border.all(
                                color: Colors.white,
                                width: 1,
                              ),
                              borderRadius: BorderRadius.circular(10),
                              image: DecorationImage(
                                fit: BoxFit.cover,
                                image: NetworkImage(list[index]),
                              ),
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                ),
              ),
              Container(
                alignment: Alignment.center,
                height: 20,
                child: SizedBox(
                    height: 16,
                    width: 32,
                    // 通过FittedBox来将Text自适配容器的宽高
                    child: FittedBox(
                      // 这里设置自适应高度调整字体大小
                      fit: BoxFit.fitHeight,
                      child: Text(
                        "${selectedIndex + 1}/${list.length}",
                        style: const TextStyle(
                          color: Colors.grey,
                          decoration: TextDecoration.none,
                          // fontSize: 16,
                        ),
                      ),
                    )),
              ),
            ],
          ),
        ),
        // 移除overlay按钮
        Positioned(
          right: 20,
          top: 40,
          child: IconButton(
            onPressed: widget.hideOverlay,
            icon: const Icon(
              Icons.close,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
  }
}
